<template>
  <el-card class="box-card card-margin" shadow="hover">
    <div slot="header" class="clearfix">
      <el-button
        :disabled="!category3Id"
        type="primary"
        size="small"
        @click="goAddSpu"
        ><i class="el-icon-plus"></i> 添加SPU</el-button
      >
    </div>
    <!-- SPU列表 -->
    <el-table
      :data="spuList"
      border
      :row-key="
        (row) => {
          return row.id;
        }
      "
    >
      <el-table-column type="index" label="序号" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="spuName" label="SPU名称" align="center" />
      <el-table-column prop="description" label="SPU描述" align="center" />
      <el-table-column label="操作" align="center" width="300">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            class="el-icon-plus"
            size="mini"
            title="添加SKU"
            @click="goAddSku(row)"
          />
          <el-button
            type="warning"
            class="el-icon-edit"
            size="mini"
            title="修改SPU"
            @click="goUpdateSpu(row)"
          />
          <el-button
            type="info"
            class="el-icon-info infor-margin"
            size="mini"
            title="查看SKU列表"
            @click="isShowSkuList(row)"
          />

          <el-popconfirm
            confirm-button-text="删除"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="您确定要删除这个SPU吗？"
            @onConfirm="deleteSpu(row.id)"
          >
            <el-button
              type="danger"
              class="el-icon-delete"
              size="mini"
              title="删除SPU"
              slot="reference"
            />
            <!-- <el-button slot="reference">删除</el-button> -->
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      class="pagination-margin"
      @size-change="updatePageSize"
      @current-change="updatePage"
      :current-page="page"
      :page-sizes="[3, 6, 9]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper, -> , sizes, total"
      :total="total"
    ></el-pagination>
    <!-- SKU列表 -->
    <el-dialog
      :title="`${spuSaleAttrListItem.spuName} => SKU列表`"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-table :data="skuList" border>
        <el-table-column
          label="序号"
          type="index"
          width="60px"
          align="center"
        />
        <el-table-column label="名称" prop="skuName" align="center" />
        <el-table-column
          label="价格"
          prop="price"
          align="center"
          width="100px"
        />
        <el-table-column
          label="重量"
          prop="weight"
          align="center"
          width="100px"
        />
        <el-table-column label="默认图片" align="center" width="120px">
          <template v-slot="{ row }">
            <img :src="row.skuDefaultImg" style="height: 80px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "spuListComponent",
  data() {
    return {
      page: 1,
      pageSize: 3,
      total: 0,
      spuList: [],
      dialogVisible: false,
      skuList: [],
    };
  },
  mounted() {
    this.$bus.$on("getSpuList", this.getSpuList);
    this.$bus.$on("clearSpuList", this.clearSpuList);
    // this.getSpuList();
  },
  methods: {
    ...mapMutations("spu", [
      "UPDATE_SPUSALEATTRLISTITEM",
      "RESET_SPUSALEATTRLISTITEM",
    ]),
    // 删除SPU
    async deleteSpu(spuId) {
      await this.$api.deleteSpu(spuId);
      this.$message.success("删除SPU成功");
      this.getSpuList();
    },
    // 展示SKU列表
    async isShowSkuList(row) {
      this.dialogVisible = true;
      this.UPDATE_SPUSALEATTRLISTITEM(row);
      const res = await this.$api.getSkuList(row.id);
      this.skuList = res.data;
    },
    // 关闭SKU列表
    handleClose() {
      this.dialogVisible = false;
      this.skuList = [];
      this.RESET_SPUSALEATTRLISTITEM();
    },
    // 打开添加SKU页面
    goAddSku(row) {
      this.$bus.$emit("updateIsShow", "AddSku");
      this.UPDATE_SPUSALEATTRLISTITEM(row);
    },
    // 打开修改SPU页面
    goUpdateSpu(row) {
      this.$bus.$emit("updateIsShow", "AddOrUpdateSpu");
      this.UPDATE_SPUSALEATTRLISTITEM(row);
    },
    // 获取SPU列表数据
    async getSpuList() {
      if (!this.category3Id) return;
      const params = {
        page: this.page,
        limit: this.pageSize,
        category3Id: this.category3Id,
      };
      const res = await this.$api.getSpuList(params);
      this.spuList = res.data?.records;
      this.total = res.data?.total;
    },
    // 清除SPU列表
    clearSpuList() {
      this.spuList = [];
    },
    // 分页器
    updatePage(page) {
      this.page = page;
      this.getSpuList();
    },
    updatePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getSpuList();
    },
    // 打开添加SPU页面
    goAddSpu() {
      this.$bus.$emit("updateIsShow", "AddOrUpdateSpu");
    },
  },
  computed: {
    ...mapState("category", ["category3Id"]),
    ...mapState("spu", ["spuSaleAttrListItem"]),
  },
  watch: {
    category3Id: {
      handler(newCategory3Id) {
        if (!newCategory3Id) {
          this.clearSpuList();
          return;
        }
        this.getSpuList();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination-margin {
  margin-top: 20px;
}
.card-margin {
  margin-top: 20px;
}
.infor-margin {
  margin-right: 10px;
}
</style>
